<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>主页</title>
    <script src="vue.js"></script>
    <!-- 引入elementui样式 -->
    <link rel="stylesheet" href="element-ui/http_unpkg.com_element-ui_lib_theme-chalk_index.css">
    <!-- 引入elementui组件库 -->
    <script src="element-ui/http_unpkg.com_element-ui_lib_index.js"></script>
    <script src="axios.js"></script>
    <style>
        #table{
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            width: 1200px;
            margin-left: 300px;
            margin-top: 30px;
            position: fixed;
            height: 500px;
        }


        #navbar{
            margin-top: 30px;
            position: fixed;

        }
    /*    设置弹出框中的字体样式*/
        #addDialog{
            font-size: 20px;
            font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
        }
    </style>
</head>
<body>

<div id="box">
    <div id="navbar" >
        <!--    侧边栏-->
        <el-col :span="12" >
            <el-menu
                    default-active="4"
                    class="el-menu-vertical-demo"


                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b">
                <el-submenu index="1" style="width: 300px; ">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>管理员操作控制台</span>
                    </template>
                    <el-menu-item-group>
<!--                                添加图书 可以弹出一个对话框-->
                        <el-menu-item  type="text" index="1-1"  @click="centerDialogVisible = true">添加图书</el-menu-item>
                        <el-menu-item index="1-2" @click="clearBooks">清空图书</el-menu-item>
                        <el-menu-item index="1-3" @click="outLogin">退出登录</el-menu-item>
                    </el-menu-item-group>


                </el-submenu>

            </el-menu>
        </el-col>
    </div>



    <div >
<!--    查询到的结果-->
<!--        不加height属性 也就是不固定表头-->
<!--        max-height 设置为动态的 500px对应于一页8条数据 1000px对应于一页12条数据 -->
        <el-table id="table"
                  :data="tableData"
                  style="width: 1000px"

        >
        <el-table-column
                type="index"
                :index="Nindex"
                label="序号"
                width="150">
        </el-table-column>
        <el-table-column
                prop="bookId"
                label="图书编号"
                width="150">
        </el-table-column>
        <el-table-column
                prop="bookName"
                label="书名"
                width="120">
        </el-table-column>
        <el-table-column
                prop="bookCategory"
                label="分类"
                width="120">
        </el-table-column>
        <el-table-column
                prop="author"
                label="作者"
                width="120">
        </el-table-column>
        <el-table-column
                prop="publisher"
                label="出版社"
                width="120">
        </el-table-column>
        <el-table-column
                prop="price"

                label="价格"
                width="120">
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                align="center"
                width="100px">
            <template slot-scope="scope">
                <el-button
                        @click="updateBook(scope.$index, tableData)"
                        type="text"
                        size="small">
                    修改
                </el-button>

                <el-button
                        @click="deleteBook(scope.$index, tableData)"
                        type="text"
                        size="small">
                    移除
                </el-button>
            </template>
        </el-table-column>
    </el-table>


    <div id="pagination">
        <el-pagination align='center'
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-sizes="[8,12]"
                       :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="countSize">
        </el-pagination>

    </div>
    </div>

<!--    添加图书弹出框-->
    <div id="addDialog">
        <el-dialog
                style="font-size: 50px"
                title="添加图书"
                :visible.sync="centerDialogVisible"
                width="30%"
                center>
            请输入图书编号:
            <el-input type="number" v-model="bookId" placeholder="请输入图书编号"></el-input>
            请输入图书名:
            <el-input type="text" v-model="bookName" placeholder="请输入图书名"></el-input>
            请输入分类:
            <el-input type="text" v-model="category" placeholder="请输入分类"></el-input>
            请输入作者:
            <el-input type="text" v-model="author" placeholder="请输入作者"></el-input>
            请输入出版社:
            <el-input type="text" v-model="publisher" placeholder="请输入出版社"></el-input>
            请输入价格:
            <el-input type="number" v-model="price" placeholder="请输入价格"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addBook">确 定</el-button>
            </span>
        </el-dialog>
    </div>


<!--    修改图书对应的弹出框-->
    <div id="updateDialog">
        <el-dialog
                style="font-size: 50px"
                title="修改图书信息"
                :visible.sync="updateDialogIsShow"
                width="30%"
                center>
            请输入图书编号:
            <el-input type="number" disabled="true" :value="inputValue" placeholder="请输入图书编号"></el-input>
            请输入图书名:
            <el-input type="text" v-model="bookName" placeholder="请输入图书名"></el-input>
            请输入分类:
            <el-input type="text" v-model="category" placeholder="请输入分类"></el-input>
            请输入作者:
            <el-input type="text" v-model="author" placeholder="请输入作者"></el-input>
            请输入出版社:
            <el-input type="text" v-model="publisher" placeholder="请输入出版社"></el-input>
            请输入价格:
            <el-input type="number" v-model="price" placeholder="请输入价格"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="updateDialogIsShow = false">取 消</el-button>
                <el-button type="primary" @click="updateBookClick">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</div>
<script>


    let indexTable;
    let dataItem;
    var vue = new Vue({
        el:"#box",
        data:{
            tableData:[],
            centerDialogVisible: false,
            updateDialogIsShow:false,
        //    下面是分页相关的属性
            currentPage:1,
            pageSize:8,
            countSize:0,
        //    下面是添加图书的信息的默认值
            bookId:"",
            bookName:"",
            category:"",
            author:"",
            publisher:"",
            price:"",
            inputValue:""
        },
        mounted(){
            axios({
                    method:'post',
                    url:'QueryBooksCountServlet'
                }
            ).then((response)=>{
                console.log(response.data)
                this.countSize=response.data

            }).then( axios.get("PaginationServlet?pageSize="+this.pageSize+"&startIndex="+this.pageSize*(this.currentPage-1))
                .then((response)=>{
                    this.tableData=response.data}))
        },

        methods:{
            //这里是分页相关的方法
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                //如果每页显示十二个，改变pageSize 和表格高度
                if (val===12){
                    document.getElementById("table").style.height="1000px";
                    this.pageSize=12;
                    axios.get("PaginationServlet?pageSize="+this.pageSize+"&startIndex="+12*(this.currentPage-1))
                        .then((response)=>{
                            this.tableData=response.data});

                }else if(val===8){
                    document.getElementById("table").style.height="500px";
                    this.pageSize=8;
                    axios.get("PaginationServlet?pageSize="+this.pageSize+"&startIndex="+8*(this.currentPage-1))
                        .then((response)=>{
                            this.tableData=response.data});
                }
            },
            //当页码改变 发送axios请求给后端 改变当前的tableSize  尽量把分页交给后端，这样用户体验会更好，而且也可以应对数据量大的情况
            handleCurrentChange(val) {
                this.currentPage=val;
                axios.get("PaginationServlet?pageSize="+this.pageSize+"&startIndex="+this.pageSize*(this.currentPage-1))
                    .then((response)=>{
                        this.tableData=response.data});
            },
            //当页面改变 前端中的序号也需要改变
            Nindex(index){
                    return index = (this.currentPage-1) * this.pageSize+index+1
                },
            //下面是CURD的方法
            addBook() {
                let param = new URLSearchParams()
                param.append('bookId', this.bookId)
                param.append('bookName', this.bookName)
                param.append('category', this.category)
                param.append('author', this.author)
                param.append('publisher', this.publisher)
                param.append('price', this.price)
                this.centerDialogVisible = false;
                console.log("进行添加");
                //调用AddBookServlet进行添加数据
                axios({
                    method:"post",
                    url: "AddBookServlet",
                    data: param
                })
                    //注意 往数组里面传递数据用push
                    .then((response)=>{
                        console.log(response.data);
                        this.tableData.unshift(response.data);
                        this.countSize++})
                    .then(() => {
                        this.$message({
                            message: '添加成功',
                            type: 'success',
                            //弹框显示的时间
                            duration: 1000
                        });
                        //添加动态添加页码的功能
                        if (this.countSize > this.pageSize * this.pageCount) {
                            this.pageCount++
                        }
                    }).catch(()=>{
                        this.$message.error('添加失败');
                    });


            },

            clearBooks() {
                let deleteCount
                this.$confirm('此操作将永久删除所有图书, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //提交请求
                    axios.get('ClearAllBooksServlet')
                            .then((response)=>{this.$message({
                                type: 'success',
                                message: "删除了"+response.data+"条数据",
                                duration: 1000});
                                this.countSize=0;
                                this.pager=1})
                            .then(()=>{this.tableData=[];})
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除',
                        duration: 1000,
                    });
                });
            },
            //table中的修改操作
            updateBook(index,bookInfo){
                indexTable=index;
                dataItem=bookInfo[index];
                this.inputValue=dataItem.bookId
                this.updateDialogIsShow=true

            },
            //传入servlet的修改操作
            updateBookClick(){
                let param = new URLSearchParams();
                param.append('bookId',this.inputValue);
                param.append('bookName', this.bookName)
                param.append('bookCategory', this.category)
                param.append('author', this.author)
                param.append('publisher', this.publisher)
                param.append('price', this.price)
                this.tableData[indexTable].bookId=this.inputValue
                this.tableData[indexTable].bookName=this.bookName
                this.tableData[indexTable].bookCategory=this.category
                this.tableData[indexTable].author=this.author
                this.tableData[indexTable].publisher= this.publisher
                this.tableData[indexTable].price=this.price

                //通过axios发送给servletpost请求
                axios({
                    method:"post",
                    url:"UpdateBookServlet",
                    data:param
                }).then((response)=>{
                    console.log(response.data);})
                    .then(()=>{
                        this.$message({
                            message: '修改成功',
                            type: 'success',
                            duration: 1000,
                        });
                    }).catch(()=>{
                    this.$message.error('修改失败');
                });




                this.updateDialogIsShow=false;
            },
            //移除操作
            deleteBook(index,bookInfo){
                // let param = new URLSearchParams()
                // param.append('bookId', this.bookId)
                axios.get("DeleteBookServlet?bookId="+this.tableData[index].bookId).then(()=>{
                    this.$message({
                        message: '删除成功',
                        type: 'success',
                        duration: 1000,
                    });
                    this.tableData.splice(index,1)
                    this.countSize--;
                    if (this.countSize <= (this.pageSize-1) * this.pageCount){
                        this.pageCount--;
                    }
                }).catch(()=>{
                    this.$message.error('删除失败');
                });
                console.log(this.tableData[index].bookId)
            },
            outLogin(index,bookInfo){
                location.href="login.html"
            }
        }
    });

</script>
</body>
</html>